{extend name="common/index"}
{block name="css"}
{/block}

{block name="content"}
<div class="layui-row">
    <form id="editForm" class="layui-form tpl-form-label-long" action="">
        <input type="hidden" name="cat_id" value="{$data.cat_id|default=''}">
        <div class="layui-field-box">
            <div class="layui-main">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属板块：</label>
                    <div class="layui-input-block">
                        {notempty name="basicList"}
                        {volist name="basicList" id="vo"}
                        {eq name="vo.cat_code" value="AD"}
                        <input type="radio" name="cat_type" value="{$vo.basic_id}" title="{$vo.basic_name}" lay-filter="changeType" {eq name="vo.basic_id" value="$data.cat_type|default='0'"}checked{/eq}>
                        {/eq}
                        {/volist}
                        {/notempty}
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">上级栏目：</div>
                    <div class="layui-input-block">
                        <select name="pid" id="pid">
                            <option value="0">顶级</option>
                            {volist name="catList" id="vo"}
                            <option value="{$vo.cat_id}" {eq name="vo.cat_id" value="$data.pid|default=''"}selected{/eq}>{$vo.cat_name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">栏目名称：</div>
                    <div class="layui-input-block">
                        <input type="text" name="cat_name" class="layui-input" value="{$data.cat_name|default=''}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" >栏目排序：</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort_num" value="{$data.sort_num|default=''}" placeholder="数字越小，越靠前" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">显示位置：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="location" value="0" title="无">
                        {notempty name="basicList"}
                        {volist name="basicList" id="vo"}
                        {eq name="vo.cat_code" value="AC"}
                        <input type="radio" name="location" value="{$vo.basic_id}" title="{$vo.basic_name}" {eq name="vo.basic_id" value="$data.location|default='0'"}checked{/eq}>
                        {/eq}
                        {/volist}
                        {/notempty}
                    </div>
                    <span style="color: #FFB800;">前端页面显示位置，如：顶部banner图内、左侧栏位、右侧栏位</span>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="state" value="1" title="启用" {eq name="$data.state|default=1" value="1"}checked{/eq}>
                        <input type="radio" name="state" value="0" title="禁用" {eq name="$data.state|default=1" value="0"}checked{/eq}>
                    </div>
                </div>
            </div>
            <div class="tpl-form-action">
                <button class="layui-btn layui-btn-radius layui-btn-lg" lay-submit lay-filter="formSubmit">保存</button>
            </div>
        </div>
    </form>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    var cat_type = $('input:radio[name="cat_type"]:checked').val();//变更前的值
    //实例化表单
    layui.use(['form'], function () {
        var form = layui.form;

        //radio单选框被点击时触发
        form.on('radio(changeType)', function(data){
            if (data.value == cat_type) {
                return false;//值未变更，则终止
            }
            cat_type = $('input:radio[name="cat_type"]:checked').val();//赋值变更后的值
            var index = layer.load(2, {time: 10*1000});
            $.post('{:url("article/getCatListOptionTree")}', {cat_type:data.value}, function (result) {
                layer.close(index);
                if (result.code) {
                    $('#pid').html('<option value="0">顶级</option>' + result.data.option_tree);
                    form.render('select');
                } else {
                    layer.alert(result.msg);
                }
            }, 'json');
        });

        //监听提交
        form.on('submit(formSubmit)', function(data){
            var index = layer.load(2, {shade:[0.5,'#000'],time: 10*1000});
            $.post('{:url("save")}', $('#editForm').serialize(), function (result) {
                layer.close(index);
                if (result.code) {
                    layer.msg(result.msg, {shade:[0.5,'#000'],time:1000}, function () {
                        window.location.href = result.url;
                    });
                } else {
                    layer.alert(result.msg, {icon:2, title:'保存失败！'});
                }
            }, 'json');
            return false;
        });
    });
</script>
{/block}